<template>
  <view class="houseType-main">
    <view class="selections-wrapper">
      <view class="selection" :class="unlimited===true?'activeSelection': ''" @click="reset">不限</view>
      <view class="selection" :class="selected[0]===true?'activeSelection': ''" @click="setRoom(1)">一室</view>
      <view class="selection" :class="selected[1]===true?'activeSelection': ''" @click="setRoom(2)">两室</view>
      <view class="selection" :class="selected[2]===true?'activeSelection': ''" @click="setRoom(3)">三室</view>
      <view class="selection" :class="selected[3]===true?'activeSelection': ''" @click="setRoom(4)">四室</view>
      <view class="selection" :class="selected[4]===true?'activeSelection': ''" @click="setRoom(5)">五室及以上</view>
      <!--      <view class="selection" >其它-->
      <!--      </view>-->
      <view class="selection" style="border: none;background-color: white">
      </view>
      <view class="selection" style="border: none;background-color: white">
      </view>
    </view>
    <view class="buttons-wrapper">
      <button @click="reset" class="blue-wide-button grey-button button">清空</button>
      <button class="blue-wide-button  button" @click="confirm">确定</button>
    </view>
  
  </view>
</template>

<script>
  import {removeValOf} from "../../util/funcs"

  export default {
    data() {
      return {
        index: 1,
        house_room: [],
        selected: [false, false, false, false, false,],
        unlimited: true,
      }
    },
    methods: {
      setRoom(val) {
        this.unlimited = false
        if (!removeValOf(this.house_room, val)) {
          this.house_room.push(val)
          this.$set(this.selected, val - 1, true)
        } else {
          this.$set(this.selected, val - 1, false)
        }


      },
      reset() {
        this.house_room = [];
        this.selected = [false, false, false, false, false,]
        this.unlimited = true
      },
      confirm() {
        this.$emit('confirm', {
          house_room: this.house_room
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  @import "../../assets/styles/global";
  @import "common";
  
  .houseType-main {
    height: 45vw;
    background-color: white;
    padding: 10px;
    
    .selections-wrapper {
      flex-wrap: wrap;
      display: flex;
      align-items: center;
      height: 98px;
      justify-content: space-around;
      
      .selection {
        &:active {
          background-color: whitesmoke;
        }
  
        width: 21vw;
        height: 34px;
        border-radius: 4px;
        border: 1px solid #C8C7CC;
        @include center;
        margin-left: 7px;
        @include borderBox;
        @include ellipsis;
        font-size: 12px;
        line-height: 24px;
        color: #3d444c;
      }
      
      .activeSelection {
        border: 1px solid #004fbf;
        color: #004fbf;
        
      }
    }
    
  }


</style>
